<script lang="ts" setup>
import { appWindow } from '@tauri-apps/api/window';
import {onMounted, ref} from 'vue'
import { hideRightMenu } from '../function'

// 阻止右键菜单默认事件
hideRightMenu();

const show = ref<boolean>(false);

onMounted(()=>{
    let strwin = localStorage.getItem(appWindow.label);
    if(strwin){
        let win = JSON.parse(strwin);
        top.value = win.alwaysOnTop
    }
    showMenu();
})

const emit = defineEmits(['rightClick']);


const showMenu = function(){
    document.addEventListener('contextmenu',function(){
        show.value = !show.value
        emit('rightClick');
    })
    
}

// 最上层
const top = ref<boolean>(false)
const toptoggle = function(){
    top.value = !top.value    
    appWindow.setAlwaysOnTop(top.value);
    let strwin = localStorage.getItem(appWindow.label);
    if(strwin){
        let win = JSON.parse(strwin);
        win.alwaysOnTop = top.value
        localStorage.setItem(appWindow.label,JSON.stringify(win));
    }
}

// 关闭
const close = function(){
    appWindow.close();
    localStorage.removeItem(appWindow.label);
    localStorage.removeItem(appWindow.label+'-data');
    let strwins = localStorage.getItem('wins');
    if(strwins){
        let wins:string[] = JSON.parse(strwins);
        let index = wins.indexOf(appWindow.label);
        wins.splice(index,1);
        localStorage.setItem('wins',JSON.stringify(wins));
    }
}

export interface Props {
  br?: string
}

const props = withDefaults(defineProps<Props>(), {
  br: '25px',
})
</script>

<template>

<div v-show="show" :style="{borderRadius:br}" class="rightmenu" data-tauri-drag-region>
        <slot></slot>
        <div class="menuitem" @click="toptoggle">
            <img :src="top?'icon/topping.png':'icon/down.png'" alt="" class="menuimg">
        </div>
        <div class="menuitem" @click="close">
            <img :src="'icon/close.png'" alt="" class="menuimg">
        </div>
        
    </div>
</template>

<style scoped>
 .rightmenu{
    width: 100vw;
    height: 100vh;
    background: rgba(217,217,217,0.5);
    position: absolute;
    top: 0px;
    
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center ;
    flex-wrap: wrap;
}

.menuitem{
    width: 30px;
    height: 30px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.menuimg{
    width: 25px;
    height: 25px;
}
</style>